<template>
  <v-layer>
    <page-view :data="dataItem"
               v-for="(dataItem,dataIndex) in data"
               :key="dataItem.pageIndex"/>
    <v-text :config="textConfig" v-if="isDebugger"/>
  </v-layer>
</template>

<script>
  import PageView from "./PageView";
  import mixins from "./mixins";
  import VueKonva from "@/components/vue-konva";

  let {vText, vLayer} = VueKonva

  export default {
    name: "LayerView",
    components: {PageView, vText, vLayer},
    mixins: [mixins],
    computed: {
      textConfig () {
        return {
          fill: 'green',
          fontSize: 14 / this.scale,
          x: 0,
          // offsetX: this.imageSize.width / 2,
          fontFamily: "Consolas, serif",
          text: `
          进度    ：${this.progress}
          页索引  ：${this.currPageIndex}
          标记长度：${this.markList.length}
          滚动高度：${this.scrollTop}
          滚动宽度：${this.scrollLeft}
          缩放比例：${this.scale}
          涂鸦个数：${this.scrawlListLength}
          截图    ：${this.isClip}
          涂鸦    ：${this.isScrawl}
          旋转角度：${this.rotation}`
        }
      },
      scrawlListLength () {
        let arr = []
        let scrawlItem = this.scrawlList.find(item => item.pageIndex === this.currPageIndex)
        if (scrawlItem) arr = scrawlItem.data || []
        return arr.length
      }
    },
    props: {
      data: Array
    }
  }
</script>

<style scoped lang="scss">
  .stage-view-out-box {
    height: 100%;
    width: 100%;
  }
</style>
